<template>
    <div class="teacher-courses">
        <h2>{{ userinfo.username }}教的课程</h2>
        <el-card v-if="courses && courses.length > 0" class="course-card" shadow="hover">
            <template #header>
                <div class="course-header">
                    <span class="header-title">课程列表</span>
                    <el-button type="text" @click="refreshCourses">刷新</el-button>
                </div>
            </template>
            <el-row>
                <el-loading v-if="isLoading" v-loading="isLoading" text="加载中..." fullscreen
                            style="width:100%;margin: 50px 200px;height: 100px"/>
                <el-col v-else :span="8" v-for="course in courses" :key="course.id">
                    <el-card shadow="hover" class="course-card-info">
                        <el-row class="course-header">
                            <el-col :span="8" class="course-id">ID: {{ course.code }}</el-col>
                            <el-col :span="8" align="center" class="course-name">{{ course.name }}</el-col>
                            <el-col :span="8" align="right" class="course-category">{{ course.categoryName }}</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6"><strong>开课学院：</strong></el-col>
                            <el-col :span="18"><p>{{ course.collegeName }}</p></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6"><strong>教师：</strong></el-col>
                            <el-col :span="18"><p>{{ course.teacherName }}<span>{{ course.teacherId }}</span></p>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6"><strong>学分：</strong></el-col>
                            <el-col :span="18"><p>{{ course.credits }}</p></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6"><strong>学时：</strong></el-col>
                            <el-col :span="18"><p>{{ course.period }}</p></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6"><strong>课程归属:</strong></el-col>
                            <el-col :span="6">{{ course.ownershipName }}</el-col>
                            <el-col :span="12" align="right">
                                <el-button type="primary" size="small" @click.prevent="navigateToRecordScore(course)">
                                    录入成绩
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
        <div v-else class="no-courses">
            <p>暂无课程信息</p>
            <el-button type="primary" @click="refreshCourses">刷新</el-button>
        </div>
    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {useUserinfo} from "@/components/Avatar/hooks/useUserinfo";
import {FindAllTeacherCourses} from "@/api/course";
import router from "@/router";
import {ElMessage} from "element-plus";

const {userinfo} = useUserinfo()  // 调用导入的js文件中的useUserinfo方法，从Pinia中获取用户数据
const userInfo = userinfo
// 模拟教师的课程数据
const courses = ref([])

// 页面加载时获取课程数据
onMounted(async () => {
    await fetchData()
})

const isLoading = ref(false);

// 刷新课程列表
const refreshCourses = () => {
    isLoading.value = true;
    setTimeout(async () => {
        // 加载完成后隐藏加载指示器
        isLoading.value = false;
        await fetchData()
    }, 500)// 重新调用接口获取课程数据
};

const fetchData = async () => {
    const {data} = await FindAllTeacherCourses(userInfo.value.username)
    courses.value = data.map(course => {
        return {
            id: course.id,
            code: course.code,
            name: course.name,
            categoryName: course.categoryName,
            collegeName: course.collegeName,
            teacherName: course.courseTeacherName,
            credits: course.credits,
            period: course.period,
            ownershipName: course.ownershipName,
            teacherId: course.courseTeacherId
        }
    })
}

const navigateToRecordScore = (course) => {
    if (!router.hasRoute('recordScore')) {
        // 当路由不存在时，显示错误提示
        ElMessage.warning('暂未到成绩录入开放时间');
        return;
    }
    router.push({name: 'recordScore', query: course});
}

</script>

<style scoped>
.teacher-courses {
    padding: 20px;
}

.course-card {
    margin-bottom: 20px;
}

.course-card-info {
    margin-bottom: 20px;
}


.course-id {
    font-weight: bold;
}

.course-name {
    font-size: 16px;
    font-weight: bold;
}

.course-category {
    font-weight: bold;
}

.course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title {
    font-size: 20px;
}

.course-id {
    color: #999;
}

.course-details p {
    margin-bottom: 4px;
}

.no-courses {
    text-align: center;
    margin-top: 20px;
}
</style>
